<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <router-link to='/home'>home</router-link>
        <router-link to='/news'>news</router-link> -->
        <router-link :to='{name:"home",query:{a:10,b:30}}'>home</router-link>
        <router-link to='/news'>news</router-link>
        <router-view></router-view>
        <button @click='cons'>打印路由</button>
    </div>
</body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
    const home={
        template:`
            <div>
                <span>我是home页</span>
            </div>
        `,
        mounted(){
            console.log(this.$route)
        }
    };
    const news={
        template:`
            <div>
                <span>我是news页</span>
            </div>
        `
    }

    const router=new VueRouter({
        routes:[
            {
                path:'/',
                redirect:'/home'
            },
            {
                path:'/home',
                name:'home',
                component:home,
                children:[
                    {
                        path:'/home/oo',
                        component:{
                            template:`
                                <div>
                                    132132
                                </div>
                            
                            `
                        }
                    }
                ]
            },
            {
                path:'/news',
                component:news
            }
        ]
    })
    const vm=new Vue({
        el:'#app',
        router,
        methods:{
            cons(){
                console.log(this.$router)
                // alert(11)
            }
        }
    })
</script>
</html>